<template>
  <div class="new_friend">
    <div v-if="friendStore.friendApplyList.length === 0" class="empty">
      <span class="iconfont icon-shimodumeiyou icon"></span>
    </div>
    <div v-else>
      <template v-for="item in friendStore.friendApplyList" :key="item.id">
        <NewItem :item="item" @apply-handle="applyHandle"></NewItem>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

import NewItem from './c-cnps/item.vue'

import useFriend from '@renderer/pinai/modules/friend'
import useList from '@renderer/pinai/modules/list'
import useOptions from '@renderer/pinai/modules/options'
import { message } from '@renderer/utlis/feedback'

const friendStore = useFriend()
const listStore = useList()
const optionsStore = useOptions()

onMounted(() => {
  getFriendApplyList()
  optionsStore.clearNewFriendApplyNum()
})

// 获得好友申请列表
const getFriendApplyList = () => {
  friendStore.getFriendApplyListAction()
}

// 申请处理
const applyHandle = (info) => {
  friendStore.handleFriendApplyAction(info).then(() => {
    message('处理成功', 'success')
    getFriendApplyList()
    listStore.getFriendList()
  })
}
</script>

<style lang="scss" scoped>
.new_friend {
  display: flex;
  justify-content: center;
  padding-top: 50px;

  .empty {
    .icon {
      font-size: 80px;
    }
  }
}
</style>
